<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>城市活力</title><!--引入echarts.js-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <#--图表-->
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
    <script src="${base}/static/report/map-echarts/hainan.json"></script>
</head>
<body>
<#--城市人口分布-->
<div style="font-weight:bold;font-size:20px;margin-top: 20px;">一、人口地理分布</div>
<div id="dp_area_desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<table  id='dp_area_table' style="margin-top:20px;">
    <tr>
        <th>区域</th>
        <th>地市</th>
        <th>人口数量统计（万人）</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表1 人口地理分布特征</div>
<script>
    (function () {
        var dpAreaTable = ${dataTable5}
        var dataTable5Region = ${dataTable5Region}
        $("#dp_area_desc").text("截至目前，省内人口的地理分布，主要受自然环境条件和经济发展水平的影响，根据统计结果发现，" + dataTable5Region[0].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5FirstRegionRate}%，人口数量最多，高达" + dataTable5Region[0].count / 10000 + "万人，" +
            dataTable5Region[1].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5SecondRegionRate}%，" +
            dataTable5Region[2].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5ThirdRegionRate}%，" +
            dataTable5Region[3].region.substr(0,1) + "部区域人口占全省人口数量${dataTable5FourthRegionRate}%，" +
            dataTable5Region[4].region.substr(0,1) + "部区域人口占比最少，占全省人口数量${dataTable5LastRegionRate}%，人口数量为" + dataTable5Region[4].count / 10000 + "万人。")
        $(document).ready(function(){
            $.each(dataTable5Region,function(index,item){
                var tr='<td>'+item.region+'</td>'+'<td>'+item.county+'</td>'+'<td>'+item.count / 10000+'</td>';
                $("#dp_area_table").append('<tr>'+tr+'</tr>')
            });
        });
    })()
</script>

<#--城市人口迁徙-->
<div style="font-weight:bold;font-size:20px;margin-top: 20px;">二、城市人口迁徙</div>
<div id="table16-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<table  id='table16' style="margin-top:20px;">
    <tr>
        <th>目前居住地市</th>
        <th>上月居住地市</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表16 城市人口迁入情况</div>
<table  id='table17' style="margin-top:20px;">
    <tr>
        <th>上月居住地市</th>
        <th>目前居住地市</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表17 城市人口迁出情况</div>
<script>
    (function () {

        var dataTable16 = ${dataTable16}
        var dataTable17 = ${dataTable17}
        var dataTable16Merged = ${dataTable16Merged}
        var dataTable17Merged = ${dataTable17Merged}

        $("#table16-desc").text("据统计，由表16可看出"+dataTable16Merged[0].preCounty+"市是全省迁入规模最大的城市，迁入总人数为"+dataTable16Merged[0].count+"人，占比${dataTable16FirstRate}%，其次是"+dataTable16Merged[1].preCounty+"是，迁入总人数为"+dataTable16Merged[1].count+"人，占比${dataTable16SecondRate}%，"+dataTable16Merged[2].preCounty+"是迁入总人数为"+dataTable16Merged[2].count+"人，占比${dataTable16ThirdRate}%，排名第三。由表17可看出"+dataTable17Merged[0].preCounty+"市是全省迁出规模最大的城市，迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17FirstRate}%，其次是"+dataTable17Merged[1].preCounty+"是，迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17SecondRate}%，"+dataTable17Merged[2].preCounty+"是迁出总人数为"+dataTable17Merged[1].count+"人，占比${dataTable17ThirdRate}%，排名第三。")

        $(document).ready(function(){
            $.each(dataTable16,function(index,item){
                var county = '<td>'+item.county+'</td>';
                if (item.county==='总计') {
                    county = '<td style="font-weight: bold">'+item.county+'</td>';
                }
                var tr='<td>'+item.preCounty+'</td>'+county+'<td>'+item.count+'</td>';
                $("#table16").append('<tr>'+tr+'</tr>')
            });
            $.each(dataTable17,function(index,item){
                var county = '<td>'+item.county+'</td>';
                if (item.county==='总计') {
                    county = '<td style="font-weight: bold">'+item.county+'</td>';
                }
                var tr='<td>'+item.preCounty+'</td>'+county+'<td>'+item.count+'</td>';
                $("#table17").append('<tr>'+tr+'</tr>')
            });
            merge("#table16 tr");
            merge("#table17 tr");
            function merge(id) {
                var $st = -1;
                $(id).each(function(r) {
                    if($st === -1) {
                        $st = $(this).find('td:eq(0)');
                    }else if($st.html() === $(this).find('td:eq(0)').html()) {
                        $st.prop('rowspan', $st.prop('rowspan')+1);
                        $(this).find('td:eq(0)').remove();
                    }else $st = $(this).find('td:eq(0)');
                });
            }
        });
    })()
</script>

<#--旅游用户趋势-->
<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> 三、旅游用户趋势 </div>
<div style=" text-indent: 2em; font-size: 20px; line-height: 35px; margin-top: 10px;"> 截至目前，旅游用户数量变化趋势如下图所示： </div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <div style="float: left;font-size: 18px;font-weight: bold;">旅游用户趋势</div>
    <select id="areaId" style="float: right;padding: 5px;min-width: 100px;" onchange="changeArea()"></select>
</div>
<div id="my_echarts4" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>
<div id="desc-tourist-trend" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图3 旅游用户数量变化趋势</div>

<script>
        var result4 = ${touristDtoList}
        $(document).ready(function(){
            $("#desc-tourist-trend").text("${descTouristTrend}");
            // 四、旅游用户趋势
            var resultKey = [], resultData = [];
            $.each(result4,function(key, item) {
                resultKey.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#areaId").append(option)
            });
            // 取第一个的值
            resultData = resultKey.length>0? result4[resultKey[0]]: [];
            initEcharts(resultData);
        });
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xCategory,
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            }
        }
        function getSCategory(result, type) {
            var series = [], xCategory = [], data = [];
            $.each(result,function(index,item) {
                if(type===1) {
                    data.push(item.count);
                    xCategory.push(item.date);
                    if(index === (result.length-1)) {
                        series.push({ type: 'line', data: data, areaStyle: {opacity: 0.3} })
                    }
                } else if(type===2) {
                    var obj = { name: '', type: 'line', data: [] };
                    var count = $.map(item.datas, function(n, i){ return n.count; });
                    if(index===0) {
                        xCategory = $.map(item.datas, function(n, i){ return n.date; })
                    }
                    obj.name = item.type;
                    obj.data = count;
                    series.push(obj);
                }
            });
            return {
                series,
                xCategory
            }
        }
        // 旅游用户数量变化趋势
        function initEcharts(datas) {
            var myecharts = echarts.init(document.getElementById("my_echarts4"));
            var series = getSCategory(datas, 1).series;
            var xCategory = getSCategory(datas, 1).xCategory;
            var optionLine = getOption(xCategory, series);
            myecharts.setOption(optionLine);
        }
        function changeArea() {
            var areaId = document.getElementById('areaId');
            var d1 = areaId.options[areaId.selectedIndex].value;
            var d2 = areaId.value;
            initEcharts(result4[d2])
        }
</script>

<#--通勤人口职住地区域-->
<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、通勤人口职住地分布</div>
<div id="table6-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
</div>
<#--<table  id='table6' style="margin-top:20px;">
    <tr>
        <th>区县</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表6 通勤人口居住地分布情况</div>-->
<div id="map6" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图4 通勤人口居住地分布情况</div>

<#--<table  id='table7' style="margin-top:15px;">
    <tr>
        <th>区县</th>
        <th>人数</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表7 通勤人口工作地分布情况</div>-->
<div id="map7" style="width: 1000px; height: 500px; margin: 0 auto; margin-top: 20px"></div>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">图5 通勤人口工作地分布情况</div>
<script>
    (function () {
        var result6 = ${dataTable6}
        var result7 = ${dataTable7}
        /*var result6 = [
            { pubArea: "海口", pubCount: 6 },
            { pubArea: "白沙", pubCount: 565 },
            { pubArea: "陵水", pubCount: 44 },
        ];
        var result7 = [
            { pubArea: "海口", pubCount: 6 },
            { pubArea: "三亚", pubCount: 99 },
            { pubArea: "文昌", pubCount: 44 },
        ];*/
        var dataTable6First = ${dataTable6First}
        var dataTable6FirstWork = ${dataTable6FirstWork}
        var dataTable6Second = ${dataTable6Second}
        var dataTable6SecondWork = ${dataTable6SecondWork}
        $("#table6-desc").text('据统计结果发现，居住在' + dataTable6First.county + '区域的人数最多，高达' + dataTable6First.count + '人，该区域对应的工作人口数量为' + dataTable6FirstWork +'人；其次是' + dataTable6Second.county + '区域，居住人数为' + dataTable6Second.count + '人，工作人数为' + dataTable6SecondWork + '人。')
        $(document).ready(function(){
            // $.each(dataTable6,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table6").append('<tr>'+tr+'</tr>')
            // });
            // $.each(dataTable7,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.count+'</td>';
            //     $("#table7").append('<tr>'+tr+'</tr>')
            // });
            var outdata6 = $.map(result6, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option6 = getOptionMap(outdata6);
            var echartsMap6 = echarts.init(document.getElementById("map6"));
            echarts.registerMap("hainan", hainan);
            echartsMap6.setOption(option6);

            var outdata7 = $.map(result7, function(n, i){
                return {
                    name: n.county,
                    value: n.count
                }
            });
            var option7 = getOptionMap(outdata7);
            var echartsMap7 = echarts.init(document.getElementById("map7"));
            echarts.registerMap("hainan", hainan);
            echartsMap7.setOption(option7);
        });
        function getOptionMap(outdata) {
            var option = {
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        if (params.value) {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;" +
                                params.value +
                                "&nbsp;&nbsp;"
                            );
                        } else {
                            return (
                                "&nbsp;&nbsp;" +
                                params.name +
                                "&nbsp;&nbsp;&nbsp;0&nbsp;&nbsp;"
                            );
                        }
                    },
                },
                visualMap: {
                    type: 'piecewise',
                    min: 0,
                    max: 2000000,
                    left: 20,
                    bottom: 0,
                    showLabel: !0,
                    padding: [15, 10],
                    backgroundColor: "transparent", //标题背景色
                    borderColor: "#01698C", //边框颜色
                    color: "#01698C",
                    textStyle: {
                        color: "#000"
                    },
                    borderWidth: 1,
                    pieces: [
                        {
                            gt: 2000000,
                            label: "200万以上",
                            color: "#FF1B00"
                        },
                        {
                            gte: 2000000,
                            lte: 1000000,
                            label: "100万 - 200万",
                            color: "#DE6B00"
                        },
                        {
                            gte: 200000,
                            lt: 1000000,
                            label: "20万 - 100万",
                            color: "#F1CE2A"
                        },
                        {
                            value: 0,
                            color: "rgba(1,63,77, 0.3)"
                        }
                    ],
                    show: !0
                },
                geo: {
                    map: "hainan",
                    roam: !1,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    zoom: 1.2,
                    label: {
                        show: true,
                        color: "#fff",
                        fontSize: 12
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#22A3BE",
                            areaColor: "rgba(1,89,98, 0.2)",
                            borderWidth: 1,
                            shadowBlur: 0.01,
                            shadowColor: "rgba(63, 218, 255, 1)"
                        },
                        emphasis: {
                            areaColor: "rgba(243, 131, 75, 0.8)",
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0,
                            shadowBlur: 20,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        }
                    },
                },
                series: [
                    {
                        type: "map",
                        map: "hainan",
                        aspectScale: 0.75,
                        zoom: 1.2,
                        label: {
                            normal: {
                                formatter: function (para) {
                                    return "{name|" + para.name + "}";
                                },
                                rich: {
                                    cnNum: {
                                        fontSize: 11,
                                        color: "#333333",
                                        align: "center",
                                    },
                                    name: {
                                        fontSize: 10,
                                        color: "#333333",
                                        align: "center",
                                        lineHeight: 20,
                                    },
                                },
                                //formatter: '{b}',
                                color: "#333333",
                                show: true,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#D9EEFF",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#FFAE00",
                            },
                        },
                        data: outdata,
                        nameMap: {
                            海口: "海口市",
                            三亚: "三亚市",
                            儋州: "儋州市",
                            五指山: "五指山市",
                            琼海: "琼海市",
                            文昌: "文昌市",
                            万宁: "万宁市",
                            东方: "东方市",
                            定安: "定安县",
                            屯昌: "屯昌县",
                            澄迈: "澄迈县",
                            临高: "临高县",
                            白沙: "白沙黎族自治县",
                            昌江: "昌江黎族自治县",
                            乐东: "乐东黎族自治县",
                            陵水: "陵水黎族自治县",
                            保亭: "保亭黎族苗族自治县",
                            琼中: "琼中黎族苗族自治县",
                            南海诸岛: "三沙市"
                        },
                    },
                ],
            }
            return option
        }
    })()
</script>
<style>
    table th, table td { border-bottom: 0.5px solid #999;border-right: 0.5px solid #999999; }
    table { border-top: 0.5px solid #999; border-left: 0.5px solid #999;width: 800px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;margin: 0 auto;font-size: 20px;}
</style>
</body>
</html>